<template>
    <div class="content">
        <myNavbar title="会员注册"></myNavbar>
        <div class="login_content">
            <div class="button_content">
                <div class="button_phone">
                    <input placeholder="请输入登录账号" class="phone_input" placeholder-color="#000000" v-model="username" />
                </div>
                <div class="button_phone">
                    <input placeholder="请输入登录密码" class="phone_input" placeholder-color="#000000" v-model="password" style="placeholder-color:#000000" />
                </div>
                <div class="button_phone">
                    <input placeholder="请输入邀请人账号" class="phone_input" placeholder-color="#000000" v-model="code" style="placeholder-color:#000000" />
                </div>
                <div class="button_phone">
                    <input placeholder="请输入电话号码" class="phone_input" placeholder-color="#000000" v-model="mobile" style="placeholder-color:#000000" />
                </div>
                <div class="button_phone">
                    <input placeholder="验证码" class="verification_input" maxlength='4' type="number" v-model="verifyCode" />
                    <div class="verification_button" @click="verificationClick" v-if="isShow == true">
                        <text class="verification_button_title">获取验证码</text>
                    </div>
                    <div class="verification_button" v-if="isShow==false">
                        <text class="verification_button_title">{{second+"s"}}</text>
                    </div>
                </div>
            </div>
            <div style="margin-top: 40px" class="login_click botton_Bg_Color" @click="userloginClick">
                <text class="login_click_title">注册账号</text>
            </div>
        </div>
    </div>
</template>

<script>
import { subUserRegister } from "@/api/subUser";
import {sendMsg, } from '@/api/user'
import myNavbar from "@/components/myNavbar/myNavbar.vue";
import md5 from "js-md5";

export default {
    data() {
        return {
            code: "",
            password2: "",
            userName: "",
            password: "",
            loginCode: "",
            imeiId: "",
            second: 60,
            isShow: true,
            mobile: "",
            verifyCode: "",
        };
    },
    components: { myNavbar },
    created() {},
    mounted() {
        this.imeiId = this.getImei();
    },
    methods: {
        userloginClick() {
            var _this = this;
            if (this.isNull(_this.username)) {
                eeui.toast("请输入登录账号");
                return;
            }
            if (this.isNull(_this.password)) {
                eeui.toast("请输入登录密码");
                return;
            }
            if (this.isNull(_this.mobile)) {
                eeui.toast("请输入电话号码");
                return;
            }
            if (this.isNull(_this.verifyCode)) {
                eeui.toast("请输入验证码");
                return;
            }
            subUserRegister({
                username:
                  "mch_" + _this.getGlobalData().mchId + "_" + this.username,
                password: md5(this.password),
                xuid: this.xuid,
                code: this.code,
                mchId: _this.getGlobalData().mchId,
                mobile:_this.mobile,
                verifyCode:_this.verifyCode
            }).then((res) => {
                eeui.closePage();
            });
        },
        verificationClick() {
            var _this = this;
            if (
                this.mobile == "" ||
                this.mobile.length != 11 ||
                !/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|((19[0-9])))|\d{8}$/.test(
                        this.mobile
                )
            ) {
                eeui.toast("请输入正确手机号码");
                return;
            }
            console.log(_this.getGlobalData().mchId);
            sendMsg({
                username: _this.mobile,
                tplKey: "register",
                mchId: _this.getGlobalData().mchId,
            })
                .then((res) => {
                    this.timer();
                    this.isShow = false;
                    console.log(res);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        timer: function () {
            let promise = new Promise((resolve, reject) => {
                let setTimer = setInterval(() => {
                    this.second = this.second - 1;
                    if (this.second <= 0) {
                        this.second = 60;
                        this.isShow = true;
                        resolve(setTimer);
                    }
                }, 1000);
            });
            promise.then((setTimer) => {
                clearInterval(setTimer);
            });
        },
    },
};
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
.content {
    flex: 1;
    background-color: rgba(248, 248, 248, 0.8);
}

.login_content {
    padding-top: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 1;
}

.login_click {
    width: 650px;
    height: 84px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.login_click_title {
    font-size: 32px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
}

.button_content {
    display: flex;
    flex-direction: column;
    margin-left: 0px;
}

.button_phone {
    width: 654px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    height: 106px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(212, 215, 220, 1);
}

.phone_input {
    width: 564px;
    font-size: 32px;
    font-weight: 400;
    /*color: rgba(26, 26, 30, 1);*/
    line-height: 48px;
    /*opacity: 0.4;*/
}

.placeholderClass {
    color: red;
}

.verification_input {
    width: 480px;
    height: 106px;
    font-size: 28px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 48px;
    opacity: 0.4;
}
.verification_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 168px;
    height: 56px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(212, 215, 220, 1);
}

.verification_button_title {
    border-radius: 4px;
    font-size: 24px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
}
</style>
